// 拓展vue原有的功能

// vue2  使用插件  传入一个对象  对象里有install 函数  某人传入vue的构造函数
// vue3  使用插件  传入一个对象   默认传入app实例


// import sleleton from './xtx-sleleton.vue'
// import carousel from './xtx-carousel.vue'
// import More from './xtx-more.vue'
// import Bread from './xtx-bread.vue'
// import BrandItem from './xtx-bread-item.vue'

//  批量导入组件
// 使用 `require` 提供的函数 `context`  加载某一个目录下的所有 `.vue` 后缀的文件。
// 然后 `context` 函数会返回一个导入函数 `importFn`
// - 它又一个属性 `keys() `  获取所有的文件路径
// 通过文件路径数组，通过遍历数组，再使用 `importFn`  根据路径导入组件对象
// 遍历的同时进行全局注册即可

// context(加载的目录, 是否继续加载目录, 加载文件的正则匹配)
const importFn = require.context('./', false, /\.vue/)
import defaultImage from '@/assets/images/200.png'
import Message from './Message'
import Confirm from './Confirm'

export default {
    install(app) {
        // 在app进行扩展 app 提供 component directive 函数
        // 如果想要挂载原型方法 :  app.config.globalProperties 方法

        // 注册全局插件
        // app.component(sleleton.name, sleleton)
        // app.component(carousel.name, carousel)
        // app.component(More.name, More)
        // app.component(Bread.name, Bread)
        // app.component(BrandItem.name, BrandItem)
        // ---- 利用 context.keys() 批量导入组件
        importFn.keys().forEach(path=>{
            // 默认导入
            const conponent = importFn(path).default
            app.component(conponent.name,conponent)
        })

        // 使用指令
        defineDirective(app)

        // 挂载原型方法
        app.config.globalProperties.$message = Message 
        app.config.globalProperties.$confirm = Confirm 
    }
}


// 自定义指令 实现图片懒加载
const defineDirective = (app) => {
    // 图片懒加载指令  v-lazy
    // 原理  先存储图片地址不放在src上 当进入可视区， 将图片地址设置给图片元素即可
    app.directive('lazy', {
        // vue2  监听使用指令的DOM 是否渲染   钩子函数 inserted
        // vue3  下指令拥有的钩子函数和组件是一样的    钩子函数 mounted

        mounted(el, binding) {
            // 2. 创建一个观察对象，来观察当前使用指令的元素
            const observe = new IntersectionObserver(([{ isIntersecting }]) => {
                if (isIntersecting) {
                    // 停止观察
                    observe.unobserve(el)
                    // 3. 把指令的值设置给el的src属性 binding.value就是指令的值
                    // 4. 处理图片加载失败 error 图片加载失败的事件 load 图片加载成功
                    // onload 加载成功
                    el.onerror = () => {
                        // 加载失败，设置默认图
                        el.src = defaultImage
                    }
                    el.src = binding.value
                }
            }, {
                threshold: 0
            })
            // 开启观察
            observe.observe(el)
        }
    })
}